<template>
  <div style="width: 100%">
    <div v-if="$slots.headerTop" style="margin: 5px">
      <slot name="headerTop"></slot>
    </div>
    <div v-if="showSelectionBar" style="margin: 5px">
      <TableSelectionBar :clearSelectedRowKeys="props.clearSelectedRowKeys!" :count="props.count" />
    </div>
    <div class="flex items-center">
      <div :class="`${prefixCls}__toolbar_left`">
        <slot name="tableTitle" v-if="$slots.tableTitle"></slot>
        <TableTitle :helpMessage="titleHelpMessage" :title="title" v-if="!$slots.tableTitle && title" />
      </div>

      <div :class="`${prefixCls}__toolbar`">
        <slot name="toolbar"></slot>
        <Divider type="vertical" v-if="$slots.toolbar && showTableSetting" />
        <TableSettingComponent :setting="tableSetting" v-if="showTableSetting" @columns-change="handleColumnChange" />
      </div>
    </div>
    <div class="flex item-center" v-if="$slots.tableTop" style="margin: 8px 5px 0">
      <slot name="tableTop"></slot>
    </div>
  </div>
</template>
<script lang="ts" setup>
import type { TableSetting, ColumnChangeParam, TableActionType } from '../types/table';
import type { PropType } from 'vue';
import { Divider } from 'ant-design-vue';
import TableSettingComponent from './settings/index.vue';
import TableTitle from './TableTitle.vue';
import { useDesign } from '@/hooks/web/useDesign';
import TableSelectionBar from '../components/TableSelectionBar.vue';

defineOptions({ name: 'BasicTableHeader' });

const props = defineProps({
  title: {
    type: [Function, String] as PropType<string | ((data) => string)>,
  },
  tableSetting: {
    type: Object as PropType<TableSetting>,
  },
  showTableSetting: {
    type: Boolean,
  },
  titleHelpMessage: {
    type: [String, Array] as PropType<string | string[]>,
    default: '',
  },
  //
  clearSelectedRowKeys: {
    type: Function as PropType<TableActionType['clearSelectedRowKeys']>,
  },
  count: {
    type: Number,
    default: 0,
  },
  showSelectionBar: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(['columns-change']);
const { prefixCls } = useDesign('basic-table-header');
function handleColumnChange(data: ColumnChangeParam[]) {
  emit('columns-change', data);
}
</script>
<style lang="less">
@prefix-cls: ~'@{namespace}-basic-table-header';

.@{prefix-cls} {
  &__toolbar_left {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: flex-start;
    height: 28px;
    border-radius: 0;
    background: #F3F7FB;
    box-shadow: inset 0 1px 3px 0 rgb(0 0 0 / 20%);
  }

  &__toolbar {
    >* {
      margin-right: 8px;
    }

    & > :first-child {
      margin-left: 8px;
    }
    
    & > :last-child {
      margin-right: 0;
    }

  }
}
</style>
